<template>
	<view class="refund">
		<view class="top">
			<image src="/static/icon/white-back.png" @tap="nav" />
			<view>退款详情</view>
		</view>
		<view class="bg"></view>
		<view class="header">
			<view class="title">退款信息</view>
			<view class="item">{{info.order.room_no + info.order.room_type}}  {{ info.order.storey}}楼</view>
			<view class="item">{{info.order.room_type_alias}} {{info.order.amount}}元</view>
			<view class="item">订单编号：{{info.order.order_sn}}</view>
			<view class="item">申请时间：{{info.create_time}}</view>
		</view>
		<view class="communication" @tap="communication">
			<view>沟通记录</view>
			<image src="/static/icon/right.png" mode=""></image>
		</view>
		<view class="main">
			<view class="title">退款进度</view>
			<view class="item" v-if="show >= 3 && info.handle_time && info.feedback_state == 1">
				<view class="icon" v-if="show == 3"><image src="/static/order/icon1.png"></image></view>
				<view class="item_titel">退款成功</view>
				<view class="item_text">退款金额{{info.order.amount}}元已经成功退款到您的账户余额中</view>
				<view class="item_time">{{info.handle_time}}</view>
			</view>
			<view class="item" v-if="show >= 3 && info.handle_time && info.feedback_state == 2">
				<view class="icon" v-if="show == 3"><image src="/static/order/icon2.png"></image></view>
				<view class="item_titel" style="color: #f93735;">退款失败</view>
				<view class="item_text">因其他原因，退款申请被驳回</view>
				<view class="item_time">{{info.handle_time}}</view>
			</view>
			<view class="item" v-if="show >= 2 && info.audit_time">
				<view class="icon" v-if="show == 2"><image src="/static/order/icon1.png"></image></view>
				<view class="item_titel">退款审核中</view>
				<view class="item_text">系统正在审核，如果审核成功，您的退款将于1个工作日内退回到您的账户余额中</view>
				<view class="item_time">{{info.audit_time}}</view>
			</view>
			<view class="item" v-if="show >= 1 && info.create_time">
				<view class="icon" v-if="show == 1"><image src="/static/order/icon1.png"></image></view>
				<view class="item_titel">提交退款申请</view>
				<view class="item_text">你的退款申请已提交，平台正在审核</view>
				<view class="item_time">{{info.create_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
export default {
	data() {
		return {
			show:0,
			info:{}
		};
	},
	onLoad(e) {
		this.id = e.id
		this.feedback(e.id)
	},
	methods: {
		nav() {
			uni.navigateBack();
		},
		feedback(id){
			this.getReq({
				url:'both/feedback/' + id
			}).then(data=>{
				let [err,res] = data;
				if(err||res.data.status == 0){
					this.showToast('请稍后重试！');
					return;
				}
				let {info} = res.data.data;
				console.log(info);
				if(info.create_time){
					info.create_time = moment(info.create_time * 1000).format('YYYY-MM-DD HH:mm');
					this.show = 1;
				}
				if(info.audit_time){
					info.audit_time = moment(info.audit_time * 1000).format('YYYY-MM-DD HH:mm');
					this.show = 2;
				}
				if(info.handle_time){
					info.handle_time = moment(info.handle_time * 1000).format('YYYY-MM-DD HH:mm');
					this.show = 3;
				}
				this.info = info
			})
		},
		communication() {
			uni.navigateTo({
				url: '/pages/hotel/service/question4?id=' + this.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.refund {
	width: 750upx;
	color: #333;
	background: #f8f8f8;
	min-height: 100vh;
	.top {
		width: 750upx;
		padding-top: var(--status-bar-height);
		height: 86upx;
		background-color: #3595f9;
		position: fixed;
		left: 0;
		top: 0;
		font-size: 36upx;
		color: #fff;
		text-align: center;
		line-height: 86upx;
		image {
			position: absolute;
			width: 32upx;
			height: 32upx;
			left: 27upx;
			bottom: 27upx;
		}
	}
	.bg {
		width: 750upx;
		background-color: #fff;
		/* #ifdef APP-PLUS */
		height: calc(var(--status-bar-height) + 86upx);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: 136upx;
		/* #endif */
	}
	.header {
		width: 702upx;
		height: 262upx;
		padding: 30upx 24upx;
		background-color: #ffffff;
		.title {
			font-size: 32upx;
			line-height: 72upx;
		}
		.item {
			font-size: 28upx;
			line-height: 48upx;
		}
	}
	.communication {
		padding: 0 24upx;
		width: 702upx;
		height: 130upx;
		margin: 20upx 0;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32upx;
		image {
			width: 24upx;
			height: 24upx;
		}
	}
	.main {
		padding: 0 24upx;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		.title {
			font-size: 32upx;
			line-height: 92upx;
		}
		.item {
			position: relative;
			margin-left: 46upx;
			box-sizing: border-box;
			padding-bottom: 50upx;
			.icon {
				content: '';
				display: block;
				position: absolute;
				top: -10upx;
				left: -44upx;
				width: 24upx;
				height: 24upx;
				border-radius: 50%;
				z-index: 9;
				image {
					width: 24upx;
					height: 24upx;
					border-radius: 50%;
				}
			}
			.item_titel {
				font-size: 28upx;
				line-height: 28upx;
			}
			.item_text {
				padding: 20rpx 0 14rpx 0;
				font-size: 24upx;
				color: #999;
				line-height: 36upx;
			}
			.item_time {
				font-size: 20upx;
				color: #999;
				line-height: 20upx;
			}
		}
		.item::before {
			content: '';
			display: block;
			position: absolute;
			top: 8upx;
			left: -41upx;
			width: 16upx;
			height: 16upx;
			border-radius: 50%;
			background-color: #e5e5e5;
		}
		.item::after {
			content: '';
			display: block;
			position: absolute;
			top: 14upx;
			left: -34upx;
			width: 2upx;
			height: 300upx;
			background-color: #e5e5e5;
		}
		.item:nth-last-child(1)::after {
			height: 100upx;
		}
	}
}
</style>
